<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>

        .static{
            width:150px;
            height:150px;
            text-align: center;
            line-height: 150px;
        }
        .a{
            background: red;
        }
        .b{
            border:3px solid blue;
        }
        .c{
            border-radius: 50%;
        }
        .main{
            width:420px;
            overflow: hidden;
            padding: 20px 10px;
            box-sizing: border-box;
            background: #f4f4f4;
            border-radius: 10px;
            height:420px;
            display: flex;
            flex-direction: column;
        }
        .nav{
            width:100%;
            display: flex;
            justify-content: space-between;
        }
        .nav-item{
            width:120px;
            height:40px;
            background: brown;
            border-radius: 6px;
            color:#fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .nav .active{
            background: #0f0;
            color:crimson;
            font-size: 20px;
        }
        .content{
            flex:1;
            width:100%;
            margin-top:20px;
            overflow: hidden;
        }
        .content-item{
            width:100%;
            height:100%;
            border-radius: 6px;
            background: darkmagenta;
            color:#fff;
            font-size: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 :data-title="msg">{{msg}}</h2>
        <h3 v-if="flag">{{txt}}</h3>
        <div v-else>
            v-if 如果条件真 则渲染和显示  如果条件假 则不渲染移除 
        </div>
        <button  @click="flag=!flag">点击切换flag</button>
        <template v-if="seen">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </template>
        <div v-if="score>90">
            A
        </div>
        <div v-else-if="score>80">
            B
        </div>
        <div v-else-if="score>70">
            C
        </div>
        <div v-else-if="score>60">
            D
        </div>
        <div v-else>
            E
        </div>
        <div v-show="show">
            v-show 之前简单的样式切换  CSS切换 
        </div>
        <button @click="show=!show">点击切换</button>
        <div v-if="userInfo">
            <h4>个人信息</h4>
            <p>用户名 : {{userInfo.username}}</p>
            <p>年纪 : {{userInfo.age}}</p>
        </div>
    </div>
        <!-- 
        v-if   条件渲染   指令的表达式返回为真 才会真正的渲染 
        表达式的值 为 false 则什么都不做 不会渲染DOM 
        template 包裹的空元素    没有任何效果

        v-else 必须 与它最近的 v-if 匹配 

        v-show   指令通过 display 来控制显示和隐藏 
        带有 v-show的元素 会始终渲染到DOM  只是简单的样式切换 

        v-if vs v-show 
        v-if 是“真正”的条件渲染  v-if 也是惰性的   如果在初始渲染时条件为假 则什么也不做——直到条件第一次变为真时，才会开始渲染条件块 
        v-show  不管条件为真为假 都会去渲染DOM  简单地基于 CSS 进行切换    
        
        使用场景 (使用频率)
        v-if 有更高的切换开销  在切换条件很少改变的情况下  推荐使用 v-if   v-if 现实初始化内部的数据变量 
        v-show 有更高的初始渲染开销  需要频繁的切换的情况下 推荐使用 v-show 

        v-if 与 v-for 一起使用 (不推荐)
        如果一定要用  
        v-for 比 v-if 有更高的优先级 
        v-if 写在 v-for(循环) 的外面 
        
        异步数据 
        错误   Cannot read property 'xxxxxx' of null"   变量的属性为 null 
        TypeError: Cannot read property 'username' of null
     -->
    <script>
        const vm = new Vue({
            data:{
                msg:"v-if && v-show",
                txt:'v-if 指令用于条件性地渲染一块内容 这块内容只会在指令的表达式返回 truthy 值的时候被渲染',
                flag:true,
                seen:true,
                score:88,
                show:true,
                userInfo:null
            },
            mounted(){
                document.querySelectorAll("title")[0].innerHTML = this.msg;
                // ajax
                setTimeout(()=>{
                    this.userInfo = {
                        username:'zuozuomu',
                        age:28
                    }
                },1000)
            }
        }).$mount("#app")
    </script>

</body>
</html>